<template>
  <div>
    <!-- 顶部布局 -->
    <NuxtLayout
      name="top-tool"
      icon="si-facebookgaming"
      title="Blog"
    >
      <template #center>
        <div style="width: 100%">
          <ElMention
            :options="searchOptions"
            :loading="isLoading"
            @search="searchHandle"
            @select="searchHandle"
            v-model="searchTextBuffer"
            placeholder="输入@以开启检索..."
          ></ElMention>
        </div>
      </template>
    </NuxtLayout>

    <!-- 文章列表 -->
    <div class="uni-640-1200-box p-2 uni-shadow secondly-color">
      <BlogArticleCard
        class="m-4"
        :title="item.title"
        :content="item.synopsis ?? ''"
        :value="item"
        :tags="item.tags ?? []"
        :picture="item.pictureUrl ?? API.DEFAULT_COS_IMAGE_URL"
        v-for="item in showList"
        @clickTitle="onClickArticleCardHandle"
      ></BlogArticleCard>
      <!-- 这玩意不知道为什么只能客户端渲染，不然就报错 -->
      <ClientOnly>
        <div class="w-full flex justify-center">
          <el-pagination
            :total="total"
            :pageSize="pageSize"
            size="large"
            layout="prev, pager, next"
            @current-change="(val) => (pageNum = val)"
          />
        </div>
      </ClientOnly>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ArticleResponse } from "~/models/article";
import type { MentionOption } from "element-plus";
import type { ResponseMsg, DataArrResponse } from "~/models/universal";
import { API } from "~/models/api";
definePageMeta({
  layout: false,
});

const list = ref<ArticleResponse[]>([]);
const total = ref(0);
const pageSize = ref(9);
const pageNum = ref(1);
const isLoading = ref(false);
const searchTextBuffer = ref("");
const searchOptions = ref<MentionOption[]>([]);

// 搜索处理者
const searchHandle = async () => {
  pageNum.value = 1;
  isLoading.value = true;
  const response = await $fetch<ResponseMsg<DataArrResponse<ArticleResponse>>>(
    "/api/article/queryList",
    {
      method: "POST",
      body: {
        mode: "FuzzyTitle",
        args: {
          payload: searchTextBuffer.value.replace("@", "").trim(),
          isSortByTime: true,
        },
      },
    }
  );

  searchOptions.value = response.data.rows.map((item) => ({
    label: item.title,
    value: item.title,
  }));

  total.value = response.data.total;
  list.value = response.data.rows;
  isLoading.value = false;
};

const showList = computed(() =>
  list.value.slice(
    (pageNum.value - 1) * pageSize.value,
    (pageNum.value - 1) * pageSize.value + pageSize.value
  )
);

searchHandle();
// 点击文字卡片程序
const onClickArticleCardHandle = async (card: ArticleResponse) => {
  // window.open(`/blog/details-${card.id}`);
  await navigateTo(`/blog/details-${card.id}`, {
    open: {
      target: "_blank",
    },
  });
  // await navigateTo('/blog/details-${}', )
};
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  background-color: rgba($color: #000000, $alpha: 0);
}
</style>
